<template>
	<view class="cates_list">
		<view class="cates_item" v-for="(item,index) in cates" @longpress="showDeleteBtn">
			<view class="img_field">
				<image :src="item.raiderArticle.article.pictures[0].filePath" class="img_1" @click="goCateDetail(item.raiderArticleID)"></image>					
				<image :src="item.raiderArticle.article.pictures[1].filePath" class="img_2" @click="goCateDetail(item.raiderArticleID)"></image>					
			</view>
			<view class="user_field">
				<view class="user_avatar">
					<image :src="users[index].avatarUrl" class="avatar_image"></image>
				</view>
				<i class="user_name">{{users[index].name}}</i>
			</view>
			<view class="praise_field">
				<praise :praiseNum="item.raiderArticle.article.praiseNumber" :type="'Raider'" :praiseid="item.raiderArticleID"></praise>
			</view>
			<view class="text_field">
				<b class="cate_title">{{item.raiderArticle.raider.title}}</b>
				<p class="cate_content">{{item.raiderArticle.raider.reason}}</p>
			</view>
			<button v-if="isDelete" class="delete_btn" @click="deleteItem(item.raiderArticleID)">删除</button>
		</view>
	</view>
</template>

<script>
	import praise from "../../../components/praise.vue"
	export default {
		components:{
			praise
		},
		data(){
			return{				
				cates:[],
				users:[],
				isDelete:false
			}
		},
		methods:{
			showDeleteBtn(){
			
				this.isDelete=!this.isDelete
			},
			deleteItem(id){
				var that=this
				uni.showModal({
				    title: '提示',
				    content: '是否取消收藏？',
				    success: function (res) {
				        if (res.confirm) {
				            that.subCollect(id)
							
				        } else if (res.cancel) {
				            
				        }
				    }
				});
			},
			async subCollect(mid){
				const res=await this.$myRequest({
					url:'/User/api/subFavorite/userid='+10001+'&raid='+mid
				})
			},
			async getFavoriteCategories(uid){
				const res=await this.$myRequest({
					url:'/User/api/FavoriteRaiderArticles/id='+uid
				})
				console.log(res)
				this.cates=res.data
				this.getusers()
			},
			goCateDetail(id){
				uni.navigateTo({
					url:'/pages/details/category-details/detail?id='+id
				})
			},
			getusers(){
				var that=this
				console.log(this.cates.length)
				this.users=[]
				this.cates.forEach(async item=>{
					const userres=await that.$myRequest({
						url:'/User/api/find/id='+item.userID
						
					})					
					console.log(userres)
					that.users.push(userres.data);
				})
			}
		},
		created(){
			this.getFavoriteCategories(10001)
		}
	}
</script>

<style lang="less">
	.delete_btn{
		width:65px;
		height:35px;
		line-height: 30px;
		z-index: 999;
		margin-left: 150px;
		background-color: #DD524D;
		color:#FFFFFF;
		font-weight:600;
		margin-top:10px;
		position:fixed;	
	}
	.cates_list{
		padding: 0 15rpx;
		display: flex;
		flex-wrap: wrap;
		.cates_item{
			
			border-bottom: 1rpx solid #DCDFE6;;
			background-color: #fff;
			margin-top:10px;
			width:100%;
			.img_field{
					
				.img_1{
					width:48%;
					height:310rpx;
					margin-right:10px;
					float:left;
				}
				
				.img_2{
					width:48%;
					height:310rpx;										
				}
			}
			.user_field{
				width: 90%;
				float:left;
				height:50rpx;
				.user_avatar{
					border:1px solid #eee;
					border-radius:50%;
					height:50rpx;
					width:50rpx;					
					margin-right: 8px;
					float: left;
					
					.avatar_image{
						height: 100%;
						width:100%;
						border-radius:50%;
						background-color: #eee;
					}
				}
				.user_name{
					line-height: 50rpx;
					font-size: 12px;
				
				}
			}
			.praise_field{
				margin-top: 5px;
				float:right;
				width:10%;
				height:50rpx;
				
			}
			.text_field{
				b{
					line-height: 30px;
					font-size: 15px;
					font-weight: 600;
				}
				p{
					line-height: 20px;
					font-size: 12px;
				}
			}
		}
	}
</style>
